<template>
  <div class="top">
    <div class="title">
      <div class="geo-location">
        <input
          type="search"
          name=""
          id=""
          v-model="city"
          placeholder="请输入要搜索的城市名称"
          @change="getCity()"
        />
      </div>
      <div>
        <p>
          <span class="color_red">{{ location.name }}</span>
          未来五天空气质量
        </p>
      </div>
    </div>
    <div class="airp">
      <div class="air" v-for="item1 in daily" :key="item1.id">
        <P>{{ item1.fxDate }}</P>
        <P>空气质量指数:{{ item1.aqi }}</P>
        <P>空气质量指数等级:{{ item1.level }}</P>
        <P>空气质量指数级别:{{ item1.category }}</P>
        <P>空气主要污染物:{{ item1.primary }}</P>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import dayjs from "dayjs";
import { mapState } from "vuex";
import {  API_CITY,API_AIRP, KEY } from "@/common/constrant.js";
export default {
  data() {
    return {
      daily: [],
      city: "",
    };
  },
  computed: {
    ...mapState(["location"]),
    updateTime: function () {
      return dayjs(this.daily.updateTime).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  created() {
    this.getAir();
  },
  methods: {
    getCity() {
      axios
        .get(API_CITY, {
          params: {
            key: KEY,
            location: this.city,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.$store.commit("updateLocationMutation", res.data.location[0]);
          console.log(this.$store.state.location);
        });
    },
    getAir() {
      axios
        .get(API_AIRP, {
          params: {
            location: this.location.id,
            key: KEY,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.daily = res.data.daily;
        });
    },
  },
  watch: {
    location: function () {
      this.getAir();
    },
  },
};
</script>

<style>
span.color_red {
  color: red;
}
.name>p{
  text-align: center;
}
.airp{
  margin: 0px auto;
  display: flex;
  background-color: #b5839a;
}
.air {
  margin: 3% auto;
}
.air>p{
color: #fff;
}
</style>